<!--
 * Description: SupplyCloud主页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/04/14 02:52
-->

<template>
  <BaseWrap>
    <!-- 查询条件 -->
    <BaseFunc
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <!-- 按钮 -->
      <template slot="btn">
        <el-button
          v-if="$hasPer('add')"
          class="btn-custom"
          icon="el-icon-circle-plus-outline"
          plain
          size="mini"
          type="primary"
          @click="addDialogVisible = true"
        >
          {{ $t('button.add') }}
        </el-button>
      </template>

      <!-- 同步按钮 -->
      <template slot="btn-middle">
        <el-input
          v-model="syncInput"
          class="el-inputbtn"
          clearable
          maxlength="6"
          oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
          placeholder="请输入年月格式:YYYYMM"
        ></el-input>
        <el-button
          class="btn-custom"
          :disabled="this.syncInput == '' ? true : false"
          icon="el-icon-search"
          :loading="IsSyncInput"
          plain
          size="mini"
          type="primary"
          @click="syncBtn"
        >
          {{ '查询' }}
        </el-button>
      </template>

      <!--抽屉内部查询表单-->
      <template>
        <el-form class="g-advance-drawer-form" label-width="130px" :model="queryForm" size="medium">
          <el-row>
            <!-- pn -->
            <el-col :span="6">
              <el-form-item label="PN">
                <el-input v-model="queryForm.pn" clearable />
              </el-form-item>
            </el-col>

            <!-- pnGroup -->
            <el-col :span="6">
              <el-form-item label="PNGroup">
                <el-input v-model="queryForm.pnGroup" clearable />
              </el-form-item>
            </el-col>

            <!-- plant -->
            <el-col :span="6">
              <el-form-item label="Plant">
                <el-input v-model="queryForm.plant" clearable />
              </el-form-item>
            </el-col>

            <!-- price -->
            <el-col :span="6">
              <el-form-item label="Price">
                <el-input v-model="queryForm.price" clearable />
              </el-form-item>
            </el-col>

            <!-- sourceCode -->
            <el-col :span="6">
              <el-form-item label="SourceCode">
                <el-input v-model="queryForm.sourceCode" clearable />
              </el-form-item>
            </el-col>

            <!-- sourcingType -->
            <el-col :span="6">
              <el-form-item label="SourcingType">
                <el-input v-model="queryForm.sourcingType" clearable />
              </el-form-item>
            </el-col>

            <!-- tower -->
            <el-col :span="6">
              <el-form-item label="Tower">
                <el-input v-model="queryForm.tower" clearable />
              </el-form-item>
            </el-col>

            <!-- gr -->
            <el-col :span="6">
              <el-form-item label="GR">
                <el-input v-model="queryForm.gr" clearable />
              </el-form-item>
            </el-col>

            <!--group-->
            <el-col :span="6">
              <el-form-item label="Group">
                <el-input v-model="queryForm.group" clearable />
              </el-form-item>
            </el-col>

            <!-- vendorCode -->
            <el-col :span="6">
              <el-form-item label="VendorCode">
                <el-input v-model="queryForm.vendorCode" clearable />
              </el-form-item>
            </el-col>

            <!-- vendorName -->
            <el-col :span="6">
              <el-form-item label="VendorName">
                <el-input v-model="queryForm.vendorName" clearable />
              </el-form-item>
            </el-col>

            <!-- vendorSimpleName -->
            <el-col :span="6">
              <el-form-item label="VendorSimpleName">
                <el-input v-model="queryForm.vendorSimpleName" clearable />
              </el-form-item>
            </el-col>

            <!-- city -->
            <el-col :span="6">
              <el-form-item label="City">
                <el-input v-model="queryForm.city" clearable />
              </el-form-item>
            </el-col>

            <!--country-->
            <el-col :span="6">
              <el-form-item label="Country">
                <el-input v-model="queryForm.country" clearable />
              </el-form-item>
            </el-col>

            <!-- lastFactory -->
            <el-col :span="6">
              <el-form-item label="LastFactory">
                <el-input v-model="queryForm.lastFactory" clearable />
              </el-form-item>
            </el-col>

            <!-- location -->
            <el-col :span="6">
              <el-form-item label="Location">
                <el-input v-model="queryForm.location" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <!--报价commodity数据表格-->
    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <!--pn-->
        <el-table-column
          align="center"
          label="PN"
          min-width="200px"
          prop="pn"
          :sort-method="$sortByLower"
          sortable
        />
        <!--pnGroup-->
        <el-table-column align="center" label="PnGroup" min-width="150px" prop="pnGroup" sortable />
        <!--plant-->
        <el-table-column align="center" label="Plant" min-width="150px" prop="plant" sortable />
        <!--price-->
        <el-table-column align="center" label="Price" min-width="200px" prop="price" sortable />
        <!--sourceCode-->
        <el-table-column
          align="center"
          label="SourceCode"
          min-width="200px"
          prop="sourceCode"
          sortable
        />
        <!--sourcingType-->
        <el-table-column
          align="center"
          label="SourcingType"
          min-width="200px"
          prop="sourcingType"
          sortable
        />
        <!--tower-->
        <el-table-column align="center" label="Tower" min-width="200px" prop="tower" sortable />
        <!--gr-->
        <el-table-column align="center" label="GR" min-width="200px" prop="gr" sortable />
        <!--group-->
        <el-table-column align="center" label="Group" min-width="200px" prop="group" sortable />
        <!--vendorCode-->
        <el-table-column
          align="center"
          label="VendorCode"
          min-width="200px"
          prop="vendorCode"
          sortable
        />
        <!--vendorName-->
        <el-table-column
          align="center"
          label="VendorName"
          min-width="200px"
          prop="vendorName"
          sortable
        />
        <!--vendorSimpleName-->
        <el-table-column
          align="center"
          label="VendorSimpleName"
          min-width="200px"
          prop="vendorSimpleName"
          sortable
        />
        <!--city-->
        <el-table-column align="center" label="City" min-width="200px" prop="city" sortable />
        <!--country-->
        <el-table-column align="center" label="country" min-width="200px" prop="country" sortable />
        <!--lastFactory-->
        <el-table-column
          align="center"
          label="LastFactory"
          min-width="200px"
          prop="lastFactory"
          sortable
        />
        <!--location-->
        <el-table-column
          align="center"
          label="Location"
          min-width="200px"
          prop="location"
          sortable
        />
        <!--creator 创建人-->
        <!-- <el-table-column
          align="center"
          :label="$t('SupplyCloud.creator')"
          min-width="100px"
          prop="creator"
          sortable
        >
          <template slot-scope="scope">
            <span>
              {{ $store.getters['user/getUserNameById'](scope.row.creator) || $t('result.none') }}
            </span>
          </template>
        </el-table-column> -->
        <!--date-->
        <el-table-column align="center" label="date" min-width="200px" prop="date" sortable />
        <!--createTime 创建时间-->
        <el-table-column
          align="center"
          :label="$t('SupplyCloud.createDate')"
          min-width="200px"
          prop="createTime"
          sortable
        />
        <!--updater 更新者-->
        <!-- <el-table-column
          align="center"
          :label="$t('SupplyCloud.updater')"
          min-width="200px"
          prop="updater"
          sortable
        >
          <template slot-scope="scope">
            <span>
              {{ $store.getters['user/getUserNameById'](scope.row.updater) || $t('result.none') }}
            </span>
          </template>
        </el-table-column> -->
      </template>

      <!-- 右浮动 -->
      <template slot="end">
        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="150px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPer('edit')"
              size="mini"
              type="text"
              @click="rowEdit(scope.$index, scope.row)"
            >
              <i class="el-icon-edit el-icon--right"></i>
              {{ $t('button.edit') }}
            </el-button>
            <el-button
              v-if="$hasPer('delete')"
              size="mini"
              type="text"
              @click="rowDelete(scope.$index, scope.row)"
            >
              <i class="el-icon-delete el-icon--right"></i>
              {{ $t('button.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>

    <!--新增对话框-->
    <BaseDialog
      v-if="addDialogVisible"
      :title="$t('dialog.add')"
      :visible.sync="addDialogVisible"
      width="55%"
    >
      <SapAdd @cancel="addDialogVisible = false" @save="afterAddSave" />
    </BaseDialog>

    <!--编辑对话框-->
    <BaseDialog
      v-if="editDialogVisible"
      :title="$t('dialog.edit')"
      :visible.sync="editDialogVisible"
      width="55%"
    >
      <SapEdit
        :input-data="currentEditRow"
        @cancel="editDialogVisible = false"
        @save="afterEditSave"
      />
    </BaseDialog>
  </BaseWrap>
</template>

<script>
import { sapGRPageList, sapGRDelete } from '@/api/spendingSaving/spendingSaving'
import { sapQuerySapGrInfo } from '@/api/quote/sap'
import SapAdd from './components/SapAdd'
import SapEdit from './components/SapEdit'

export default {
  name: 'SpaGR',
  components: { SapAdd, SapEdit },
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {
        city: '',
        country: '',
        createTime: '',
        date: '',
        gr: '',
        group: '',
        id: '',
        lastFactory: '',
        location: '',
        plant: '',
        pn: '',
        pnGroup: '',
        price: '',
        sourceCode: '',
        sourcingType: '',
        tower: '',
        vendorCode: '',
        vendorName: '',
        vendorSimpleName: ''
      },
      // 新增对话框可见标识
      addDialogVisible: false,
      // 编辑对话框可见标识
      editDialogVisible: false,
      // 当前编辑行的数据
      currentEditRow: {},
      syncInput: '',
      IsSyncInput: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.pageDataInit()
  },
  mounted() {},
  methods: {
    /* 页面数据初始化*/
    pageDataInit() {
      this.query()
    },
    /* 查询表格数据*/
    async query() {
      try {
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const res = await sapGRPageList({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: this.queryForm
        })
        this.tableData = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    /* 行记录编辑*/
    rowEdit(index, row) {
      this.currentEditRow = row
      this.editDialogVisible = true
    },
    /* 行记录删除 */
    async rowDelete(index, row) {
      try {
        await this.$confirmBox(this.$t('button.delete'), 'error')
        this.isRequesting = true
        await sapGRDelete({ id: row.id })
        this.query()
        // this.$store.dispatch('commodity/initCommodityCollects')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 新增保存之后
    afterAddSave() {
      this.addDialogVisible = false
      this.query()
      // this.$store.dispatch('commodity/initCommodityCollects')
    },
    // 修改保存之后
    afterEditSave() {
      this.editDialogVisible = false
      this.query()
      // this.$store.dispatch('commodity/initCommodityCollects')
    },
    syncBtn() {
      try {
        if (this.syncInput.length !== 6) {
          this.$message.error('输入 YYYYMM 格式的年月')
          return false
        }
        this.IsSyncInput = true
        sapQuerySapGrInfo({ date: this.syncInput })
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
        this.IsSyncInput = false
      }
    }
  }
}
</script>

<style scoped>
.el-inputbtn {
  margin-right: 2px;
}
.el-inputbtn /deep/ .el-input__inner {
  height: 30px;
  line-height: 30px;
}
</style>
